<script setup lang="ts">
import { ref,getCurrentInstance} from 'vue'
import { ElLink, ElRow, ElCol, ElCard, ElButton } from 'element-plus'
import TabNav from '../components/homepageComponents/TabNav.vue';
import SearchBar from '../components/homepageComponents/SearchBar.vue';
import HomeMain from "../components/homepageComponents/HomeMain.vue";
import Navigation from "@/components/homepageComponents/Navigation.vue";

const homepageList = ref<Array<{
  id: number;
  name: string;
  desc: string;
  price: number;
  url: string;
  eachType: number;
  dataLaunch: string;
}>>([]);

const instance = getCurrentInstance();
if (instance) {
  const global = instance.appContext.config.globalProperties;
  global.$http.get('/public/homepage/queryall')
      .then(resp => {
        console.log(resp.data);
        homepageList.value = resp.data;
      })
      .catch(err => {
        console.error(new Error(err));
      });
}


</script>

<template>
  <div id="app1">
    <SearchBar />
  </div>
  <div class="page-container">
    <div class="main-content">

      <div id="app2">
        <TabNav />
      </div>

      <div class="block">
        <span class="demonstration"></span>
        <el-carousel height="150px" motion-blur arrow="hover">
          <el-carousel-item
              v-for="homepage in homepageList.filter(item => item.id > 30)"
              :key="homepage.eachType"
          >
            <el-image
                class="changeimg"
                :src="homepage.url"
                alt="轮播图片"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>


      <div class="now-showing">
        <!-- 标题 + 全部按钮 -->
        <div class="header">
          <h2>正在热映</h2>
          <router-link :to="{name:'FilmView'}">
          <el-link type="primary" @click="viewAll">全部<el-icon><ArrowRight /></el-icon></el-link>
          </router-link>
        </div>

        <!-- 横向滚动容器 -->
        <div class="scroll-container">
          <el-row :gutter="24" class="movie-list">
            <el-col
                v-for="homepage in homepageList.filter(item => item.eachType === 1 && item.id<8) "
                :key="index"
                :span="12"
                class="movie-col"
            >
              <el-card class="movie-card">
                <!-- 图片 -->
                <router-link :to="{ name: 'FilmDetailsView', params: { filmid: homepage.id } }">
                <img
                    slot="cover"
                    :src="homepage.url"
                    alt="movie-poster"
                    class="poster"
                >
                </router-link>
                <!-- 内容区域 -->
                <template #header>
                  <div class="title">{{ homepage.name }}</div>
                </template>
<!--                <el-button
                    type="primary"
                    class="buy-btn"
                    @click="buyTicket(movie)"
                >
                  购票
                </el-button>-->
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 音乐节演出内容 -->
      <div class="recommend-container">
        <!-- 标题栏（可根据需求扩展） -->
        <div class="title-bar">
          <h2>演唱会音乐节</h2>
          <router-link :to="{name:'CategoryNavigationBar'}">
          <el-link type="primary" @click="viewAll">查看全部<el-icon><ArrowRight /></el-icon></el-link>
          </router-link>
        </div>

        <!-- 内容列表 -->
        <div class="scroll-container1">
        <el-row :gutter="24" class="sing-list">
          <el-col
              v-for="homepage in homepageList.filter(item => item.eachType === 2&& item.id<29)"
              :key="homepage.id"
              :span="12"
          >
            <el-card class="recommend-card">
              <!-- 封面图 -->
              <router-link :to="{name:'performance-detail',query:{name:homepage.name}}">
              <img
                  v-if="homepage.url"
                  :src="homepage.url"
                  alt="cover"
                  class="cover"
              >
              </router-link>

              <!-- 内容区域 -->
              <div class="content">


                <!-- 副标题/描述 -->
                <div class="subtitle">{{ homepage.desc }}</div>

                <el-button
                    type="primary"
                    class="buy-btn"
                    @click="buyTicket(movie)"
                >
                  购票
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
        </div>
      </div>

      <div>
        <HomeMain/>
      </div>
      <!-- 底部导航栏 -->
    </div>
   < <Navigation/>
  </div>
</template>


<style scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}


/* 容器样式 */
.now-showing {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 标题栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 横向滚动容器 */
.scroll-container {
  width: 100%;
  overflow-x: auto; /* 关键：开启横向滚动 */
  scrollbar-width: none; /* 隐藏浏览器默认滚动条（可选） */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

/* 隐藏 Chrome 滚动条 */
.scroll-container::-webkit-scrollbar {
  display: none;
}

/* 电影列表行 */
.movie-list {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行，实现横向排列 */
}

/* 每一列的自适应 */
.movie-col {
  flex: 0 0 auto; /* 禁止收缩，保持固定宽度 */
  width: 160px; /* 卡片宽度 */
}

/* 电影卡片 */
.movie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-bottom: 16px;
}

/* 海报 */
.poster {
  width: 100%;
  border-radius: 8px;
}


/* 标题 */
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  color: #333;
}


/* 购票按钮 */
.buy-btn {
  margin-top: auto; /* 自动顶到底部 */
}

.changeimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-container {
  padding: 20px;
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-bar h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.scroll-container1 {
  width: 100%;
  overflow-x: auto; /* 关键：开启横向滚动 */
  scrollbar-width: none; /* 隐藏浏览器默认滚动条（可选） */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}

.scroll-container1::-webkit-scrollbar {
  display: none;
}

.sing-list {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行，实现横向排列 */
}

/* 响应式布局 */
.recommend-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.recommend-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 封面图 */
.cover {
  width: 100%;
  border-radius: 8px;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0;
  line-height: 1.4;
  overflow: hidden;       /* 内容溢出的部分隐藏,和下面两个样式一起使用才生效 */
  white-space: nowrap;    /* 内容不换行 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记（...）*/

}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.like el-icon {
  margin-right: 4px;
}
</style>
